<template>
<!-- 购书页 -->
<div>
  <Search/>
  <MainNavList/>
  <div class="tabOuter">
    <div class="center">
      <div class="tabInner">
<!-- 页面左半部分 -->
          <div class="innerLeft">
            <div class="title-left"><h3>样书袋</h3></div>
            <div class="bookTable">
              <table>
                <!-- 书籍标题 -->
                <tr class="bookTitle">
                  <th class="bookItem">书籍</th>
                  <th class="bookItem">版本</th>
                  <th class="bookItem">实际支付</th>
                  <th class="bookItem">操作</th>
                </tr>
                <!-- 书籍列表 -->
                <tr class="bookItem">
                  <td class="firstList">
                    <img class="bookImg" src="../../assets/images/book.jpg" alt="">
                    <span class="bookname">计算机</span>
                  </td>
                  <td><span class="banben">电子书</span></td>
                  <td><span class="zhifu">20￥</span></td>
                  <td><span class="caozuo"><i class="el-icon-delete"></i></span></td>
                </tr>
              </table>
            </div>
            <!-- 优惠码部分 -->
            <div class="youhui">
              <div class="title">
                <h3>银子</h3>
                <span>拥有: 0.00两</span>
              </div>
              <!-- 备注 -->
              <div class="beizhu">
                <h3>备注</h3>
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容"
                  v-model="textarea">
                </el-input>
              </div>
            </div>
          </div>
<!-- 页面右半部分 -->
          <div class="innerRight">
            <div>
                <div class="mailId">
                  <h3>收获地址</h3>
                  <span><a href="">更换地址</a></span>
                </div>
                <div class="username">
                  <i>收件人:<span>姓名展示</span></i>
                  <span>电话号码展示</span>
                </div>
                <div class="cityId">
                  <span class="shi">北京市</span>
                  <span class="qu">东城区</span>
                  <span class="xiangxi">详细地址</span>
                </div>
            </div>
            <!-- 结账Check out -->
            <div class="settle">
              <div class="settleTop">
                  <h3>结算</h3>
                  <span><a href="">购前必读</a></span>
              </div>
              <div class="settleItem">
                <ul class="option">
                  <li>图书总价</li>
                </ul>
                <ul class="moneys">
                  <li><span>0</span> 两</li>
                </ul>
              </div>
              <!-- 合计 -->
              <div class="total">
                <span>合计</span>
                <i><span class="endTotal">1111</span>两</i>
              </div>
              <div class="checkOutBtn">
                <el-button round>继续购物</el-button>
                <el-button type="primary" size="small" round>结算</el-button>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import Search from "../../components/Search"
import MainNavList from "../../components/MainNavList"

export default {
  name: 'GiftPage',
  components:{
    Search,
    MainNavList
  },
  data() {
    return {
      num: 1,
      youhuiIpt:"",
      yinziIpt:"",
      textarea:""
    }
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
}
</script>

<style lang="less" scoped>
  .tabOuter{
    display: flex;
    width: 100%;
    height: 800px;
    flex-direction: row;
    margin-top: 56px;
    .center{
      width: 1080px;
      height: 100%;
      margin-left: 25%;
      .tabInner{
        margin-top: 30px;
        width: 100%;
        height: 588px;
        display: flex;
        .innerLeft{
          flex: 2;
          height: 100%;
          padding-right: 10px;
          // background-color: cyan;
          border-right:1px solid #ccc;
          .title-left{
            margin: 10px 0;
          }
        }
      }
    }
  }
  .innerLeft .bookTable table{
    width: 100%;
    border-spacing:30px;
    .bookTitle{
      height: 41px ;
      text-align: left;
      border-bottom:1px solid #ccc;
    }
    .bookItem{
      text-align: left;
      td{
        height: 90px;
      }
      .banben{
        color: #152844;
      }
      .zhifu{
        color:#FF8A00;
        font-weight:bold;
      }
      .firstList{
        display: flex;
        align-items: center;
      }
      .bookImg{
        width: 50px;
        margin-right: 16px;
      }
    }
  }
  .youhui .title{
    display: flex;
    margin: 20px 0;
    justify-content: space-between;
    span{
      color: #5f77a6;
    }
  }
  .youhui .beizhu h3{
    margin: 20px 0;
  }


  // 右半部分 结算区域

  .innerRight{
    flex: 1;
    height: 100%;
    padding-left:10px;
    // background-color: cornsilk;
    .mailId{
      display: flex;
      margin: 10px 0;
      justify-content:space-between;
    }
    .username{
      display: flex;
      margin: 10px 0;
      justify-content: space-between;
    }
    .cityId{
      padding: 10px 0;
      margin-bottom: 20px;
    }
    .settle{
      .settleTop{
        display: flex;
        margin: 20px 0;
        justify-content: space-between;
      }
      .settleItem{
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
        .option li{
          margin-bottom: 10px;
        }
        .moneys li{
          margin-bottom: 10px;
          color: #ff8a00;
        }
      }
      .total{
        margin: 15px 0;
        display: flex;
        justify-content: space-between;
        .endTotal{
          font-size: 40px;
        }
        i{
          color: #ff8a00;
        }
      }
      .checkOutBtn{
        margin-top: 40px;
        text-align: right;
      }
    }
  }

</style>
